<template>
  <div class="login-main">
    <div class="goback" @click="goback"></div>
    <el-form
        v-loading="loading"
        :label-position="labelPosition"
        label-width="25vw"
        :model="formLabelAlign"
        style="width: 80%;margin-top: 68vw"
    >
      <el-form-item label="姓名：" >
        <el-row>
          <el-col :span="12"><el-input style="width: auto;" v-model="formLabelAlign.userName"></el-input></el-col>
          <el-col :span="12">
            <el-button v-if="this.formLabelAlign.sex==0" type="success" circle>男</el-button>
            <el-button v-else size="small" circle @click="selectMan">男</el-button>
            <el-button v-if="this.formLabelAlign.sex==1" type="success" circle>女</el-button>
            <el-button v-else size="small" circle @click="selectWoman">女</el-button>
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item label="电话：">
        <el-input v-model="formLabelAlign.loginName"></el-input>
      </el-form-item><!--
      <el-form-item label="确认电话：">
        <el-input v-model="formLabelAlign.phone"></el-input>
      </el-form-item>-->
      <el-form-item label="密码：">
        <el-input type="password" v-model="formLabelAlign.password"></el-input>
      </el-form-item>
      <el-form-item label="确认密码：">
        <el-input type="password" v-model="password2"></el-input>
      </el-form-item>
      <el-form-item label="验证码：" style="float: left">
        <el-input style="width: 100px;margin-left: 0;padding-left: 0;" v-model="checkcode"></el-input>
      </el-form-item>
      <img :src="this.imgsrc" class="cheakCode">
    </el-form>
    <div class="login-button" @click="CreateAccount" v-loading.fullscreen.lock="fullscreenLoading"></div>
    <el-dialog
        title="提示"
        :visible.sync="dialogVisible"
        width="90%">
    <!--        :before-close="handleClose">-->
    <span>核对您要申请的电话号码：</span>
    <p style="color: red; font-size: larger;">{{formLabelAlign.loginName}}</p>
    <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="postCreate">确 定</el-button>
    </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "Login",
  data(){
    return{
      loading: false,
      labelPosition: 'right',
      codes:"04131364191622942709290753746220679173647482",
      picName: "1364",
      picIndex: null,
      checkcode: null,
      // imgsrc: require("../assets/codeImg/1364.jpg"),
      formLabelAlign: {
        loginName: '',
        userName: '',
        phonenumber: '',
        sex: 3,
        password: '',
      },
      password2: '',
      fullscreenLoading: null,
      dialogVisible: false
    }
  },
  created() {
    this.$parent.logining=true;
    this.picIndex = Math.floor(Math.random()*11)*4;
    console.log(this.codes.slice(this.picIndex,this.picIndex+4))
    this.picName = this.codes.slice(this.picIndex,this.picIndex+4)
    this.imgsrc = require("../assets/codeImg/"+this.codes.slice(this.picIndex,this.picIndex+4)+".jpg")
  },
  methods:{
    goback(){
      this.$parent.logining=false;
      this.$router.go(-1);
    },
    selectMan(){
      this.formLabelAlign.sex=0
    },
    selectWoman(){
      this.formLabelAlign.sex=1
    },
    checkFull(){
      if(this.formLabelAlign.userName == null) return false;
      if(this.formLabelAlign.loginName == null) return false;
      if(this.formLabelAlign.sex == 3) return false;
      if(this.formLabelAlign.password == null) return false;
      if(this.checkcode == null) return false;
    },
    CreateAccount(){
      if(false == this.checkFull()) {
        this.$notify({
          title: '提示',
          message: '请填写完整信息',
          type: 'warning',
          duration: 1000
        })
        return false;
      }
      if(this.formLabelAlign.password != this.password2) {
        this.$notify({
          title: '提示',
          message: '两次输入密码不同',
          type: 'warning',
          duration: 1000
        })
        return false;
      }
      if(this.checkcode != this.picName) {
        this.$notify({
          title: '提示',
          message: '验证码不正确',
          type: 'warning',
          duration: 1000
        })
        return false;
      }
      // this.loading = true
      this.dialogVisible = true
    },
    async postCreate(){
      this.dialogVisible = false
      this.fullscreenLoading = true;
      setTimeout(() => {
        this.fullscreenLoading = false;
      }, 500);
      this.formLabelAlign.phonenumber = this.formLabelAlign.loginName
      const { data: res } = await this.$http.post('register',this.formLabelAlign)
      console.log(res);
      if(res.code == 500){
        this.$notify({
          title: '提示',
          message: res.msg,
          type: 'warning',
          duration: 1000
        })
      }
      if(res.code == 0){
        this.$parent.logining=false;
        this.$notify({
          title: '注册成功',
          message: '请登录',
          type: 'success',
        })
        this.$router.go(-1);
      }
    }
  }
}
</script>

<style scoped>
.cheakCode{
  /*padding-top: 3vw;*/
  float: right;
  margin: 0;
  width: 80px;
  height: 40px;
  border-radius: 3px;
}

.login-main{
  width: 100vw;
  height: 200vw;
  overflow: hidden;
  background-image: url("../assets/create.png");
  background-size: 100vw 220vw;
}

.goback{
  margin-top: 10px;
  width: 100px;
  height: 100px;
  /*background-color: #8cc0ff;*/
  border-radius: 50%;
}

.login-button{
  background-image: url("../assets/create2.png");
  float: right;
  /*margin: 5px 0 0;*/
  margin-top: 10px;
  margin-right: 20vw;
  background-size: 20vw 20vw;
  width: 20vw;
  height: 20vw;
  border-radius: 50%;
  overflow: inherit;
}

.createAccount{
  float: left;
  margin-top: 6vw;
  margin-left: 6vw;
  width: 27vw;
  height: 18vw;
  /*border-radius: 50%;*/
  /*background-color: #8cc0ff;*/
}
.login-item{
  float: right;
  margin-top: 2vw;
  margin-right: 12vw;
  width: 24vw;
  height: 24vw;
  border-radius: 50%;
  /*background-color: #8cc0ff;*/
}
</style>
